<template>
	<view>
		
		<uni-load-more v-if="!firstLoad" status="loading···"></uni-load-more>
		<view v-else-if="!detail.isbuy" class="animate__animated animate__fadeIn animate__faster">
			<!-- 骨架屏 -->
			<view v-if="!firstLoad">
				<skeleton width="750" height="420" oClass="mt-2"></skeleton>
				<view class="flex flex-column align-start p-2">
					<skeleton width="400" height="50" oClass="mt-2"></skeleton>
					<skeleton width="100" height="50" oClass="mt-2"></skeleton>
					<skeleton width="200" height="50" oClass="mt-2"></skeleton>
				</view>
				<view class="flex flex-column align-start p-2 mt-2">
					<skeleton width="150" height="50" oClass="mt-2"></skeleton>
					<skeleton width="500" height="50" oClass="mt-2"></skeleton>
				</view>
				<skeleton width="750" height="420" oClass="mt-2"></skeleton>
				<skeleton width="750" height="420" oClass="mt-2"></skeleton>
			</view>

			<view>
				<!-- 顶部课程简介 图片部分 -->
				<view class="position-relative">
					<image :src="detail.cover" mode="aspectFill" style="width:100%;height: 420rpx;display: block;">
					</image>
					<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0, 0, 0, .5);"
						class="flex flex-column justify-center align-center text-white">
						<text>{{detail.start_time}}</text>
						<text>{{detail.end_time}}</text>
					</view>
				</view>

				<!-- 简介文字部分 -->
				<view class="flex flex-column p-2">
					<text class="font-md">{{detail.title}}</text>
					<text class="text-light-muted font-sm mt-2">{{detail.sub_count}}人学过</text>
					<!-- v-if="!firstLoad" -->
					<view class="flex align-end mt-2">
						<text class="font-md text-danger">￥{{detail.price}}</text>
						<text class="text-through font-sm text-light-muted">￥{{detail.t_price}}</text>
					</view>
				</view>
				<view class="blank-line" />
			</view>
			<!-- 图文内容部分 -->
			<view class="p-2">
				<view class="font-md">
					直播介绍
				</view>
				<view>
					<view class="mt-4 flex justify-center align-center">
						<!-- <mp-html container-style="max-width: 710rpx;padding:0 20rpx;" :content="(detail.isbuy && detail.type == 'media') ? detail.content : detail.try">加载中···</mp-html> -->
						<mp-html :content="detail.try">加载中···</mp-html>
					</view>
				</view>

			</view>
			<view v-if="firstLoad">
				<view style="height: 75px;" />
				<view class="buy">
					<view class="p-2 border-top fixed-bottom bg-white">
						<main-button @click="submit">{{detail.price == 0 ?'立即学习':`立即订购￥${detail.price || ''}`}}
						</main-button>
					</view>
				</view>
			</view>
		</view>

		<live-play v-else :detail="detail"></live-play>

	</view>
</template>

<script>


	export default {
		data() {
			return {
				firstLoad: false,
				detail: {
					cover: "",
					created_time: "",
					end_time: "",
					id: 0,
					isbuy: false,
					price: "",
					school_id: 0,
					start_time: "",
					status: "",
					sub_count: 0,
					t_price: "",
					title: "",
					try: "",
					type: "",
					updated_time: "",
				}
			}
		},
		
		onLoad({
			id
		}) {
			if (!id) {
				this.$toast('非法参数')
				uni.navigateBack()
				return
			}
			this.detail.id = id
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中···'
				})
				this.$api.getLiveDetail({
					id: this.detail.id
				}).then(res => {
					this.detail = res
					uni.setNavigationBarTitle({
						title: this.detail.title
					})
					console.log(this.detail, 'this.detail');
				}).finally(() => {
					this.firstLoad = true
					uni.hideLoading()
				})
			},
			
			// 立即学习
			submit() {
				if (this.detail.price == 0) {
					uni.showLoading({
						title: 'loading···'
					})
					this.$api.learn({
						goods_id: this.detail.id,
						type: 'course'
					}).then(res => {
						console.log(res, 'res');
					}).finally(() => {
						uni.hideLoading()
						this.getData()
					})
				}
				let type = 'live'
				this.$authJump(`/pages-order/creat-order/creat-order?type=${type}&id=${this.detail.id}`);
			},
		}
	}
</script>

<style>

</style>
